<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License. 
-->
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css">
    <style type="text/css">
        .dp-highlighter {
            width:95% !important;
        }
    </style>
    <style type="text/css">
        .footer {
            background-image:      url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif');
            background-repeat:     repeat-x;
            background-position:   left top;
            padding-top:           4px;
            color:                 #666;
        }
    </style>
    <link href='https://struts.apache.org/highlighter/style/shCoreStruts.css' rel='stylesheet' type='text/css' />
    <link href='https://struts.apache.org/highlighter/style/shThemeStruts.css' rel='stylesheet' type='text/css' />
    <script src='https://struts.apache.org/highlighter/js/shCore.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushPlain.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushXml.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJava.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJScript.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushGroovy.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushBash.js' type='text/javascript'></script>
    <script type="text/javascript">
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.all();
    </script>
    <script type="text/javascript" language="javascript">
        var hide = null;
        var show = null;
        var children = null;

        function init() {
            /* Search form initialization */
            var form = document.forms['search'];
            if (form != null) {
                form.elements['domains'].value = location.hostname;
                form.elements['sitesearch'].value = location.hostname;
            }

            /* Children initialization */
            hide = document.getElementById('hide');
            show = document.getElementById('show');
            children = document.all != null ?
                    document.all['children'] :
                    document.getElementById('children');
            if (children != null) {
                children.style.display = 'none';
                show.style.display = 'inline';
                hide.style.display = 'none';
            }
        }

        function showChildren() {
            children.style.display = 'block';
            show.style.display = 'none';
            hide.style.display = 'inline';
        }

        function hideChildren() {
            children.style.display = 'none';
            show.style.display = 'inline';
            hide.style.display = 'none';
        }
    </script>
    <title>Tabular inputs</title>
</head>
<body onload="init()">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr class="topBar">
        <td align="left" valign="middle" class="topBarDiv" align="left" nowrap>
            &nbsp;<a href="home.html">Home</a>&nbsp;&gt;&nbsp;<a href="faqs.html">FAQs</a>&nbsp;&gt;&nbsp;<a href="cookbook.html">Cookbook</a>&nbsp;&gt;&nbsp;<a href="tabular-inputs.html">Tabular inputs</a>
        </td>
        <td align="right" valign="middle" nowrap>
            <form name="search" action="https://www.google.com/search" method="get">
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="hidden" name="oe" value="UTF-8" />
                <input type="hidden" name="domains" value="" />
                <input type="hidden" name="sitesearch" value="" />
                <input type="text" name="q" maxlength="255" value="" />
                <input type="submit" name="btnG" value="Google Search" />
            </form>
        </td>
    </tr>
</table>

<div id="PageContent">
    <div class="pageheader" style="padding: 6px 0px 0px 0px;">
        <!-- We'll enable this once we figure out how to access (and save) the logo resource -->
        <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"-->
        <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div>
        <div style="margin: 0px 10px 8px 10px"  class="pagetitle">Tabular inputs</div>

        <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;">
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=13904">
                <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=13904">Edit Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">
                <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a>
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">Browse Space</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=13904">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=13904">Add Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=13904">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add News"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=13904">Add News</a>
        </div>
    </div>

    <div class="pagecontent">
        <div class="wiki-content">
            <div id="ConfluenceContent"><p>Sometimes you need a way to enter tabular data such as list of quantity for products in a shopping cart, marks from a list of examination candiates, etc.  If you just have one input value per line item, you can use a HashMap to store the value.  This can be expanded to support multiple input values by having multiple HashMap.  This describes a number of alternatives using some of more advanced features of WebWork.  Assume you want to capture the quantity and a gift note for a list of products in a shopping cart (i.e Amazon).</p>

<h2 id="Tabularinputs-1.Whenthenumberoflineitemsisknown">1. When the number of line items is known</h2>

<p>If you are using JSP:<br clear="none">
the cart.jsp file in altSyntax</p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;s:iterator value="cart.items" status="rowstatus"&gt;
  &lt;s:hidden name="cart.items[%{#rowstatus.index}].productId" value="%{productId}"&gt;
  &lt;s:textfield name="cart.items[%{#rowstatus.index}].qty" value="%{qty}" /&gt;
  &lt;s:textfield name="cart.items[%{#rowstatus.index}].note" value="%{note}" /&gt;
&lt;/s:iterator&gt;
</pre>
</div></div>

<p>the cart.jsp file (non altSyntax)</p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;s:iterator value="cart.items" status="rowstatus"&gt;
  &lt;s:hidden name="'cart.items[' + #rowstatus.index + '].productId'" value="productId"&gt;
  &lt;s:textfield name="'cart.items[' + #rowstatus.index + '].qty'" value="qty" /&gt;
  &lt;s:textfield name="'cart.items[' + #rowstatus.index + '].note'" value="note" /&gt;
&lt;/s:iterator&gt;
</pre>
</div></div>

<p>Alternatively, if you use Velocity as your view technology of choice:<br clear="none">
the cart.vm file</p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
#foreach ( $item in $cart.items )
  #set($index = $velocityCount - 1)
  &lt;input type="hidden" name="cart.items[$index].productId" value="$item.productId"&gt;
  &lt;input type="text" name="cart.items[$index].qty" value="$item.qty"&gt;
  &lt;input type="text" name="cart.items[$index].note" value="$item.note"&gt;
#end
</pre>
</div></div>

<p>the UpdateCartAction.class</p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
public class UpdateCartAction extends ActionSupport {

	public Cart getCart() {
                // Lazy initialization
                Cart result = ActionContext.getContext().getSession.get("cart.key");
                if ( result == null ) {
                        result = new Cart();
                        ActionContext.getContext().getSession.put("cart.key", result);
                }
		return result;
	}

	public String execute() throws Exception {
                // Just ensuring our cart is initialized...
		Cart cart = getCart();

		// loop through a
	}
}
</pre>
</div></div>

<p>the Cart.class</p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
public class Cart implements Serializable {
  private List items = new ArrayList();

  public List getItems() {
    return items;
  } 

  public void addItem(CartItem item) {
      ...
  }
}
</pre>
</div></div>

<p>the CartItem.class</p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
public class CartItem implements Serializable {
  private int qty;
  private int productId;
  private String note;

  // getters/setters...
}
</pre>
</div></div>


<h3 id="Tabularinputs-Explanation">Explanation</h3>

<p>The resulting html code is rendered as </p>

<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;input type="hidden" name="cart.items[0].productId" value="1"&gt;
&lt;input type="text" name="cart.items[0].qty" value="2"&gt;
&lt;input type="text" name="cart.items[0].note" value="This is a fun book!"&gt;

&lt;input type="hidden" name="cart.items[1].productId" value="2"&gt;
&lt;input type="text" name="cart.items[1].qty" value="2"&gt;
&lt;input type="text" name="cart.items[1].note" value="You love this one"&gt;

&lt;input type="hidden" name="cart.items[2].productId" value="3"&gt;
&lt;input type="text" name="cart.items[2].qty" value="$item.qty"&gt;
&lt;input type="text" name="cart.items[2].note" value=""&gt;
</pre>
</div></div>

<p>Webwork will populate all the entries in Cart with the correct values.<br clear="none">
In depth, the ParametersInterceptor would apply the form results to our model, leading to the call similar like</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
        ((CartItem) updateCartAction.getCart().getItems().get(0)).setProductId(1);
</pre>
</div></div>
<p>for the first shown line in the rendered result.</p>

<h2 id="Tabularinputs-2.Whenthenumberoflineitemsisunknown">2. When the number of line items is unknown</h2>

<p>For example, you want to allow the user to enter any number of ISBN, quanty and a note.  You can replace ArrayList with XWorkList, which will automatically create new items if the index is greater than the size of the list.</p>

<h2 id="Tabularinputs-3.UseTypeConversion">3. Use Type Conversion</h2>

<p>If you want more advanced way to do this, check out <a shape="rect" href="type-conversion.html">Type Conversion</a> documentation.</p></div>
        </div>

        
    </div>
</div>
<div class="footer">
    Generated by CXF SiteExporter
</div>
</body>
</html>
